<template>
  <view class="safearea-bb view-content">
    <!-- <page-nav title="选择套餐"> </page-nav> -->
    <view class="title">选择套餐</view>
    <view class="package-list package-list1" >
      <view
        v-for="item in packageList"
        :key="item.id"
        class="package-item package-item1"
        @click="selectPackage = item.id"
      >
        <image
          v-if="item.id == selectPackage"
          class="circle"
          mode="scaleToFill"
          src="@/static/images/ic_choose_s.png"
        ></image>
        <image
          v-else
          class="circle"
          mode="scaleToFill"
          src="@/static/images/ic_choose_n.png"
        ></image>
        <view class="package2">
          <view class="name"> {{ item.name }}</view>
          <view class="money"
            >共计<text class="count"> {{ item.totalNum }} </text>次，使用<text
              class="count"
            >
              {{ item.usedNum }} </text
            >次</view
          >
        </view>
        <view class="remaining-time"> 剩余{{ item.remainNum }}次 </view>
      </view>
    </view>

    <view class="btn" @click="comfirm">确认</view>
  </view>
</template>

<script setup>
import { UserApi } from "@/api";
const isLoading = ref(true);
const hasPackage = ref(true);
const type = ref(1);

const packageList = ref([
  // {
  //   id: 1,
  //   name: "护理洗+按摩精洗",
  //   time: 7,
  //   intro: "适合短发",
  //   allTime: 10,
  //   useTime: 8,
  // },
]);
const selectPackage =ref('')
const deviceNo =ref('')
onLoad((options) => {
  let obj = {
    current: 1,
    size: 100,
  };
  deviceNo.value = options.deviceNo
  // if (options.type) {
  //   obj.type = options.type;
  // }
  UserApi.postUserPackagePage(obj)
    .then((res) => {
      isLoading.value = false;
      console.log("res", res.records);
      packageList.value = res.records;
    })
    .catch((error) => {});
});

const comfirm = () => {
  UserApi.postCreateOrder({
    cardPackageUserId:selectPackage.value,
    deviceNo: deviceNo.value,
  }).then((res) => {
    uni.redirectTo({
      url: `/pagesCommon/shampooing/index?orderId=${res.orderId}`,
    });
  });
};
</script>

<style lang="scss" scoped>
.head-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 30rpx;
  color: #6f6f6f;
  //   line-height: 42rpx;
  padding: 32rpx 136rpx 0;
  > view {
    padding-bottom: 4rpx;
  }
  .active {
    color: #27ab9c;
    position: relative;
    padding-bottom: 4rpx;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(100%);
      background: #27ab9c;
      width: 100%;
      height: 10rpx;
    }
  }
}

.title {
  margin-left: 24rpx;
  font-weight: 600;
  font-size: 30rpx;
  color: #232323;
  line-height: 42rpx;
  margin-bottom: 32rpx;
  margin-top: 34rpx;
}

.package-item {
  //   height: 160rpx;
  background: linear-gradient(57deg, #21a3bd 0%, #27ab9c 100%);
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(142, 142, 142, 0.5);
  border-radius: 12rpx;
  margin: 0 24rpx 24rpx;
  display: flex;
  padding: 24rpx;
  align-items: center;
  color: #fff;
  .circle {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    // border: 4rpx solid #fff;
    // .img {
    //   width: 40rpx;
    //   height: 40rpx;
    // }
  }
  .ri-box {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    > view {
      flex: none;

      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &:first-child {
        flex: 1;
        text-align: center;
        font-size: 21px;
        position: relative;
        margin-left: 20rpx;
        letter-spacing: 12rpx;
        justify-content: flex-start;
        // &::after {
        //   content: "";
        //   position: absolute;
        //   top: 10px;
        //   bottom: 10px;
        //   right: 0;
        //   width: 1px;
        //   background: #fff;
        // }
      }
      &:last-child {
        margin-left: 20rpx;
      }
    }
  }
  .info-box {
    display: flex;
    flex-direction: column;
    // align-items: center;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 260rpx;
  }
  .time {
    font-size: 28rpx;
    color: #ffffff;
    line-height: 40rpx;
    margin-bottom: 24rpx;
  }
}
.package-item1 {
  .package2 {
    margin-left: 32rpx;
    .name {
      font-weight: 600;
      font-size: 44rpx;
      color: #ffffff;
      line-height: 60rpx;
      margin-bottom: 12rpx;
    }
    .money {
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
    }
    .count {
      color: #ff0000;
    }
  }
}
.package-list {
  flex: 1;
  overflow: auto;
  min-height: 500rpx;
}
.btn {
  width: 630rpx;
  //   margin: 0 auto;
  background: #27ab9c;
  height: 88rpx;
  margin: 48rpx auto;
  font-weight: 600;
  font-size: 36rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
}

.package-list1 {
  .package2 {
    flex: 1;
    margin-right: 16rpx;
  }
  .remaining-time {
    height: 48rpx;
    background: rgba(255, 255, 255, 0.84);
    border-radius: 8rpx;
    padding: 6rpx 24rpx;
    font-weight: 600;
    font-size: 26rpx;
    color: #27ab9c;
    align-self: flex-start;
    margin-top: 6rpx;
  }
}
</style>
